<template>
	<div>
		<div class="article-content">
			<h1 class="article-title">{{ articleContent.title }}</h1>
			<div class="article-info">
				<div class="art-footer">
					<time class="bot">
						<Icon type="ios-calendar-outline" />
						{{ articleContent.createTime | dateformatDate }}
					</time>
					<span class="sp">/</span>
					<span class="bot">
						<Icon type="ios-eye-outline" style="font-size: 24px;vertical-align:-.185em" />
						{{ articleContent.readNum }}
					</span>
					<span class="sp">/</span>
					<span class="bot">
						<Icon type="ios-chatbubbles-outline" />
						{{ articleContent.commentSum }}
					</span>
					<template v-for="(tag, tagIndex) in articleContent.yrTags" >
						<Tag fade :color="tag.color" v-if="tag.name" :key="tagIndex">{{ tag.name }}</Tag>
					</template>
				</div>
			</div>
			<div class="desc-info">
				<p>{{ articleContent.description }}</p>
			</div>
			<div class="article-body">
				<div class="ql-container ql-snow">
					<div class="ql-editor"><p v-html="articleContent.contentFormat"></p></div>
				</div>
			</div>
			<Spin size="large" fix v-if="spinShow"></Spin>
		</div>

		<!-- <CommentVssueGithub :title="'文章评论||id:'+$route.query.id"></CommentVssueGithub> -->
		<YRComment :articleId="Number($route.query.id)"></YRComment>
	</div>
</template>

<script>
import 'quill/dist/quill.snow.css';
import 'highlight.js/styles/zenburn.css';
import YRComment from '@/components/common/YRComment.vue';
import { getArticle } from '@/api/article';
import $ from 'jquery';
export default {
	name: 'ArticleContent',
	components: {
		YRComment
	},
	data: () => {
		return {
			articleContent: {},
			spinShow: false
		};
	},
	props: {},
	methods: {
		getArticleById() {
			this.spinShow = true;
			getArticle(this.$route.query.id).then(res => {
				this.articleContent = res.data;
				this.spinShow = false;
			});
		}
	},
	computed: {},
	created() {
		$('.ql-snow .ql-editor pre.ql-syntax').append(`hhhhhhh`);
		this.getArticleById();
	},
	mounted() {
		this.$nextTick(() => {});
	},
	watch: {
		$route() {
			// 对路由变化作出响应...
			// 解决相同组件间跳转 组件被复用 周期函数失效
			this.getArticleById();
		}
	}
};
</script>

<style lang="stylus">
.article-content
	background-color #fff
	min-height 20vh
	padding 20px 20px
	border-radius 10px
	position relative
	overflow hidden
	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.02), 0 4px 10px rgba(0, 0, 0, 0.06)
	.article-title
		font-size 30px
		color #444
		margin-bottom 10px
		line-height 42px
		font-weight 400
		text-transform none
	.article-info
		color rgba(0, 0, 0, 0.5)
		font-size 13px
		margin-bottom 10px
		.art-footer
			width 100%
			height 35px
			display flex
			align-items center
			.sp
				padding-right 10px
			.bot
				line-height 35px
				color #8f8f8f
				font-size 14px
				padding-right 10px
				cursor pointer
				.ivu-icon
					font-size 1.25rem
			.tag
				margin 0 10px
	.desc-info
		background #9CCC65
		padding 25px
		margin-bottom 20px
		color #fff
		opacity 0.8
		border-radius 10px
	.article-body
		font-size 16px
		line-height 1.8em
		color #24292e
		margin-bottom 20px
.ivu-tag
	height 18px
	line-height 18px
.ql-editor
	font-size 14px
	line-height 1.5
.ql-editor ol > li, .ql-editor ul > li
	line-height 2
	padding-left 0em!important
	list-style-type: unset
.ql-editor ol , .ql-editor ul
	padding-left 2.5em!important
.ql-editor li::before
	display none
.ql-container.ql-snow
	border 0
.ql-snow .ql-editor pre.ql-syntax
	padding 16px
	color #ddd
	font-family Operator Mono, Consolas, Monaco, Menlo, monospace
	font-size 12px
	padding-top 15px
	background #272822
	border-radius 5px
	box-shadow rgba(0, 0, 0, 0.55) 0px 2px 10px
</style>
